<!--  -->
<template>
  <div class="submitBox">
    <!-- 报备信息 -->
    <ul class="personInfo">
      <li>
        <div class="item">
          <p class="tip">报备人姓名：</p>
          <p>{{reportState.form.registrarName}}</p>
        </div>
        <div class="item">
          <p class="tip">项目名称：</p>
          <p>{{reportState.form.purchasePlatformName}}</p>
        </div>
      </li>
      <li>
        <div class="item">
          <p class="tip">报备人电话：</p>
          <p>{{reportState.form.registrarPhone}}</p>
        </div>
        <div class="item">
          <p class="tip">项目报备时间：</p>
          <p>{{reportState.form.registrarStartTime}} 至 {{reportState.form.registrarEndTime}}</p>
        </div>
      </li>
      <li>
        <div class="item">
          <p class="tip">采购单位（全称）：</p>
          <p>{{reportState.form.purchaseCompany}}</p>
        </div>
        <div class="item">
          <p class="tip">收货人：</p>
          <p>{{reportState.form.consigneeName}}</p>
        </div>
      </li>
      <li>
        <div class="item">
          <p class="tip">收货地址：</p>
          <p>{{reportState.form.deliveryProvinceName}}{{reportState.form.deliveryCityName}}{{reportState.form.deliveryDistrictName}}{{reportState.form.deliveryFullAddress}}</p>
        </div>
        <div class="item"></div>
      </li>
      <li>
        <div class="item">
          <p>备注：</p>
          <p>{{reportState.form.remark}}</p>
        </div>
        <div class="item"></div>
      </li>
    </ul>
    <!-- 报备商品列表 -->
    <div class="productList" v-if="tableObj.tableData.length>0">
      <div class="list-title">
        共报备
        <span>{{tableObj.total}}</span> 条商品，挂网价合计
        <span>{{parseFloat(totalSalesPrice*1000)/100/1000}}</span>
        元：
      </div>
      <table-list :tableObj="tableObj" @currSize="sizeChange" @currPage="numChange"></table-list>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, watchEffect, computed } from '@vue/composition-api'
import TableList from '@/components/public/TableList.vue'
import { useReport } from '@/hooks/report'
import { useProjectCustomerSetting } from '@/hooks/project'
import { filingAdd } from '@/api/createFilingMessage'
import { parseTime } from '@/lib/utils'

export default {

  // import引入的组件需要注入到对象中才能使用
  components: { TableList },
  setup () {
    const vm = getCurrentInstance()
    const submitForm = async () => {
      const loading = vm.$loading()
      await filingAdd(reportState.form)
      reportReset()
      vm.$router.replace('/customer/order')
      vm.$alert('您可在 "我的报备 - 订单报备" 中查看报备记录及状态', '提交报备成功', {
        confirmButtonText: '确定',
        type: 'success',
      })
      loading.close()
    }
    const { reportState, reportReset } = useReport(submitForm)
    if (!reportState.form.filingGoodsInfos) {
      vm.$set(reportState.form, 'filingGoodsInfos', [])
    }

    const tableObj = computed(() => {
      return {
        tableData: reportState.form.filingGoodsInfos,
        isOperate: false, // 是否要操作按钮
        total: reportState.form.filingGoodsInfos.length, // 总页数
        pageSize: 10, // 每页显示的条数
        pageNum: 1, // 默认第一页
        isShowPages: false, // 是否展示分页
      }
    })
    const totalSalesPrice = computed(() => {
      let price = 0
      reportState.form.filingGoodsInfos.forEach(item => {
        price += item.salesPrice * item.num
      })
      return price
    })

    const { state: projectState } = useProjectCustomerSetting()

    watchEffect(() => {
      reportState.form.projectId = projectState.projectId
      reportState.form.purchasePlatformName = projectState.projectName
    })
    reportState.form.registrarStartTime = parseTime(new Date(), '{y}-{m}-{d}')

    return {
      reportState,
      tableObj,
      totalSalesPrice,
    }
  },
  data () {
    // 这里存放数据
    return {

    }
  },

  // 方法集合
  methods: {

    // 修改分页数量大小
    sizeChange (val) {
      this.tableObj.pageSize = val
      this.getFilingProInfo(this.filiId)
    },
    // 修改页码
    numChange (val) {
      this.tableObj.pageNum = val
      this.getFilingProInfo(this.filiId)
    },
  },
}
</script>
<style lang='less' scoped>
//@import url(); 引入公共css类
.submitBox {
  .personInfo {
    width: 80%;
    margin: 5px auto;
    li {
      display: flex;
      align-items: center;
      .item {
        flex: 1;
        display: flex;
        margin-bottom: 10px;
        font-size: 14px;
        .tip {
          &:before {
            // display: block;
            content: '*';
            color: #e51c23;
          }
        }
      }
      .item:last-child {
        margin-left: 60px;
      }
    }
  }
  .productList {
    margin-top: 10px;
    .list-title {
      font-size: 14px;
      font-weight: bold;
      padding-left: 10px;
      margin-bottom: 35px;
      span {
        color: #e51c23;
      }
    }
  }
}
</style>
